<%--
  Created by IntelliJ IDEA.
  User: 曹梦1
  Date: 2024/10/26
  Time: 8:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="/js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <%-- 搜索框--%>
    <el-form :inline="true" :model="searchBranch" class="demo-form-inline">
        <el-form-item label="分店信息">
            <el-select v-model="searchBranch.branchid" placeholder="请选择分店" clearable>
                <el-option
                        v-for="item in branchList"
                        :label="item.branchname"
                        :value="item.branchid">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onIntLib">查询</el-button>
        </el-form-item>
    </el-form>
    <%--新增入库按钮--%>
    <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addintlib">新增入库</el-button>
    <%--添加商品按钮--%>
    <el-button type="primary" icon="el-icon-folder-add" @click="addGoodsAll">添加商品</el-button>
    <%--刷新按钮--%>
    <el-button type="primary" icon="el-icon-loading" @click="resetintlib">刷新</el-button>

    <%-- 展示列表--%>
    <el-table
            :data="intlibrarys"
            :border="true"
            style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
                prop="id"
                label="入库编号"
                width="100"
        >
        </el-table-column>
        <el-table-column
                prop="date"
                label="入库时间"
                width="180"
        >
        </el-table-column>
        <el-table-column
                prop="status"
                label="审核状态"
        >
            <template slot-scope="scope">
                <%--if判断1为审核中，2为审核通过，3为不通过--%>
                <el-tag
                        v-if="scope.row.status==1"
                        type="warning"
                        effect="dark">
                    审核中
                </el-tag>
                <el-tag
                        v-else-if="scope.row.status==2"
                        type="success"
                        effect="dark">
                    审核通过
                </el-tag>
                <el-tag
                        v-else-if="scope.row.status==3"
                        type="danger"
                        effect="dark">
                    审核不通过
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column
                prop="staff.staffname"
                label="操作员"
                width="100"
        >
        </el-table-column>
        <el-table-column
                prop="branch.branchname"
                label="店名"
                width="150"
        >
        </el-table-column>
        <el-table-column
                prop="dates"
                label="审核时间"
                width="180"
        >
        </el-table-column>
        <el-table-column
                prop="remark"
                label="驳回理由"
        >
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
        >
            <template slot-scope="scope">
                <el-button type="info" @click="handleClick(scope.row.id)">详细信息</el-button>
            </template>
        </el-table-column>
    </el-table>
    <%--分页 --%>
    <el-pagination
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
            :current-page="currentPage"
            :page-sizes="[10, 15, 25, 35]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

<%-- 新增入库--%>
    <el-dialog title="新增入库" :visible.sync="dialogFormVisible" width="100%">
        <el-form :model="addform" label-width="80px" >
<%--确认新增入库按钮--%>
            <el-button type="success" icon="el-icon-folder-add" @click="ConfirmIntlib">确认新增入库</el-button>
<%-- 展示商品信息--%>
            <el-table
                    :data="goods"
                    :border="true"
                    @selection-change="handleSelectionChange"
                    ref="multipleTable"
                    style="width: 100%">
                <%--全选框--%>
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="goodsname"
                        label="商品名称"
                >
                </el-table-column>
                <el-table-column
                        prop="layout"
                        label="类型信息"

                >
                </el-table-column>
                <el-table-column
                        prop="shafttype"
                        label="键轴名称"

                >
                </el-table-column>
                <el-table-column
                        prop="interfacetype"
                        label="接口名称"

                >
                </el-table-column>
                <el-table-column
                        prop="cprice"
                        label="进价"

                >
                </el-table-column>
                <el-table-column
                        prop="branchname"
                        label="店名"

                >
                </el-table-column>
                <el-table-column
                        prop="counts"
                        label="库存"

                >
                </el-table-column>
                <el-table-column label="入库量">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.ru" placeholder="请输入入库量"></el-input>
                    </template>
                </el-table-column>
            </el-table>
<%--  展示商品信息结束--%>
    <%--分页 --%>
    <el-pagination
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
            :current-page="currentPage2"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize2"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total2">
    </el-pagination>
        </el-form>
    </el-dialog>


<%--回显详细信息--%>
        <el-dialog title="详细信息" :visible.sync="dialogFormVisible2" width="100%">
            <el-table
                    :data="goodForm"
                    :border="true"
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="入库编号" >
                </el-table-column>
                <el-table-column
                        prop="goodsid"
                        label="商品编号" >
                </el-table-column>
                <el-table-column
                        prop="goods.goodsname"
                        label="商品名称"
                >
                </el-table-column>
                <el-table-column
                        prop="num"
                        label="库存"
                >
                </el-table-column>
                <el-table-column
                        prop="goods.cprice"
                        label="进价"
                >
                </el-table-column>
                <el-table-column
                        prop="branch.branchname"
                        label="店名"
                >
                </el-table-column>
                <el-table-column
                        label="总价"
                >
                    <template slot-scope="scope">
                        <span>{{scope.row.num * scope.row.goods.cprice}}</span>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
<%--结束详细信息--%>

<%--添加商品表单--%>
        <el-dialog title="添加商品" :visible.sync="dialogFormVisible3" width="100%">
            <el-form :model="addform2" label-width="80px">
                <%-- 添加按钮--%>
                <el-button type="primary" @click="addkeyboards">添加</el-button>
                <el-table
                        :data="keyBoardList"
                        border
                        style="width: 100%"
                        @selection-change="handleSelectionChange2"
                        ref="addSelection"
                >
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="url"
                            label="图片"
                            width="120">
                        <template slot-scope="scope">
                            <img :src="scope.row.url" width="100" height="100">
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="goodsname"
                            label="商品名称"
                            width="120"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="layout"
                            label="键盘布局"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="keycapname"
                            label="键帽材质"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="keyboardcolorname"
                            label="键盘颜色"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="shafttype"
                            label="轴体类型 "
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="shaftchoosename"
                            label="轴体选择"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="interfacetype"
                            label="接口类型"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="backlightcolorname"
                            label="背光颜色"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="cprice"
                            label="商品进价"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="sprice"
                            label="商品售价"
                            width="120">
                    </el-table-column>

                </el-table>
                    <%--分页 --%>
                    <el-pagination
                            @size-change="handleSizeChange3"
                            @current-change="handleCurrentChange3"
                            :current-page="currentPage3"
                            :page-sizes="[5, 10, 15, 20]"
                            :page-size="pageSize3"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total3">
                    </el-pagination>
            </el-form>

        </el-dialog>

</div>
</body>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            searchBranch: {},//搜索框数据
            branchList: [],//分店列表
            intlibrarys: [],//入库列表
            currentPage: 1,//当前页
            pageSize: 10,//每页显示的条数
            total: 0,//总条数


            dialogFormVisible: false,//新增入库弹框
            addform:{},//新增入库表单数据
            goods:[],//商品信息
            currentPage2:1,//当前页
            pageSize2:5,//每页显示的条数
            total2:0,//总条数
            selectedRows:[],//选中的数据

            dialogFormVisible2:false,//详细信息弹框
            goodForm:undefined,//详情信息商品信息列表

            dialogFormVisible3:false,//添加商品弹框
            keyBoardList:[],//添加商品列表
            selectedRows2:[],//选中的数据
            addform2:{},//添加商品表单数据
            currentPage3:1,//当前页
            pageSize3:5,//每页显示的条数
            total3:0,//总条数





        },
        created() {
            this.loadbranchList(); //加载分店列表
            this.loadIntlibrary();//加载入库列表
            this.loadGoods();// 加载商品信息
            this.loadKeyBoard();//加载键盘信息

        },
        methods: {
            //详细信息
            handleClick(id){
                this.dialogFormVisible2=true;
                axios.get("/storageVolume/getStorageVolume?id="+id).then(resp=>{
                    this.goodForm=resp.data.data;
                })
            },
            //点击新增商品按钮
            addGoodsAll(){
                this.dialogFormVisible3=true;
            },
            //确认添加
            addkeyboards(){
                //判断是否选中
                if(this.selectedRows2.length===0){
                    this.$message({
                        type: 'error',
                        message: '请选择要添加的商品!'
                    });
                    return;
                }
                axios.post("/goods/addGoodsAll",this.selectedRows2).then(resp=>{
                    if(resp.data.code==200){
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                        this.dialogFormVisible3=false;
                        this.loadGoods();
                    }else{
                        this.$message({
                            type: 'error',
                            message: '该商品已存在!'
                        });
                    }
                })
            },
            //全选框触发事件
            handleSelectionChange2(val) {
               this.selectedRows2=val;
            },
            //加载商品列表
            loadKeyBoard(){
                axios.get("/goods/listgoodsAll?pageNum="+this.currentPage3+"&pageSize="+this.pageSize3 ).then(resp => {
                    this.keyBoardList = resp.data.data.list;
                    this.total3 = resp.data.data.total;
                })
            },
            //分页
            //改变每页显示的条数
            handleSizeChange3(val) {
                this.pageSize3 = val;
                this.loadKeyBoard();
            },
            //改变当前页码
            handleCurrentChange3(val) {
                this.currentPage3 = val;
                this.loadKeyBoard();
            },




            //新增入库
            addintlib() {
                this.dialogFormVisible = true;//显示新增入库弹框
            },
            //确认新增入库
            ConfirmIntlib(){
                //判断是否选中行
                if(this.selectedRows.length===0){
                    this.$message({
                        message: '请选择商品',
                        type: 'warning'
                    });
                    return;
                }
                //循环选中的数据判断是否为数字
                for (let i = 0; i < this.selectedRows.length; i++) {
                    if(isNaN(this.selectedRows[i].ru)){
                        this.$message({
                            message: '请输入正确',
                            type: 'warning'
                        });
                        return;
                    }
                }
                //循环选中的数据是否为整数
                for (let i = 0; i < this.selectedRows.length; i++) {
                    if(this.selectedRows[i].ru%1!=0){
                        this.$message({
                            message: '请输入正确',
                            type: 'warning'
                        });
                        return;
                    }
                }
                //循环选中的数据是否为空
                for (let i = 0; i < this.selectedRows.length; i++) {
                    if(this.selectedRows[i].ru==null){
                        this.$message({
                            message: '请输入正确',
                            type: 'warning'
                        });
                        return;
                    }
                }
                //循环选中的数据是否为0
                for (let i = 0; i < this.selectedRows.length; i++) {
                    if(this.selectedRows[i].ru==0){
                        this.$message({
                            message: '请输入正确',
                            type: 'warning'
                        });
                        return;
                    }
                }
                //循环选中的数据是否为负数
                for (let i = 0; i < this.selectedRows.length; i++) {
                    if(this.selectedRows[i].ru<0){
                        this.$message({
                            message: '请输入正确',
                            type: 'warning'
                        });
                        return
                    }
                }


                axios.post("/intlibrary/addIntLib",this.selectedRows).then(resp=>{
                    if (resp.data.code == 200) {
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                        this.dialogFormVisible = false;//隐藏新增入库弹框
                        this.loadIntlibrary();//重新加载入库列表
                    } else {
                        this.$message({
                            message: '添加失败',
                            type: 'error'
                        });
                    }
                })
            },
            //多选框触发事件
            handleSelectionChange(val) {
                this.selectedRows = val;
            },
            //加载入库商品信息
            loadGoods(){
                axios.get("/goods/selectGoodsAll?pageNum=" + this.currentPage2 + "&pageSize=" + this.pageSize2).then(resp=>{
                    this.goods = resp.data.data.list;
                    this.total2 = resp.data.data.total;
                })
            },
            //分页
            //改变每页显示的条数
            handleSizeChange2(val) {
                this.pageSize2 = val;
                this.loadGoods();
            },
            //改变当前页码
            handleCurrentChange2(val) {
                this.currentPage2 = val;
                this.loadGoods();
            },

            //加载入库信息
            loadIntlibrary() {
                axios.post("/intlibrary/getAllInLib?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize, this.searchBranch).then(resp => {
                    this.intlibrarys = resp.data.data.list;
                    this.total = resp.data.data.total;
                })
            },
            //分页
            //改变每页显示的条数
            handleSizeChange1(val) {
                this.pageSize = val;
                this.loadIntlibrary();
            },
            //改变当前页码
            handleCurrentChange1(val) {
                this.currentPage = val;
                this.loadIntlibrary();
            },

            //查询
            onIntLib() {
                this.loadIntlibrary();
            },
            //刷新
            resetintlib() {
                this.searchBranch = {};//清空查询框
                this.loadIntlibrary();
            },
            //加载分店列表
            loadbranchList() {
                axios.get("/branch/getBranchName").then(resp => {
                    this.branchList = resp.data.data;
                })
            },
        },
    })
</script>
</html>
